import React, {Component} from 'react';

class App extends Component {

    a=100
    render() {
        return (
            <div>
                <input/>

                <br/>

                {/*方法一*/}
                <button onClick={() => {
                    //逻辑过多不推荐
                    console.log(111, this.a)
                }}>add1
                </button>

                <br/>

                {/*
                方法二,不推荐
                加bind改变this指向*
                call,改变this,自动执行
                apply,改变this,自动执行
                */}
                <button onClick={this.two.bind(this)}>add2</button>

                <br/>

                {/*方法三*/}
                <button onClick={this.three}>add3</button>

                <br/>

                {/*方法四*/}
                <button onClick={() => {
                    //推荐
                    this.four()
                    this.five()
                }}>add4</button>

                <br/>

                {/*方法5
                比较推荐,传参
                */}
                <button onClick={() => this.five()}>add5</button>

            </div>
        );
    }

    two() {
        //this为undefined
        console.log(222,this.a)//错误
    }

    three = () => {
        console.log(333,this.a)
    }

    four=()=>{
        console.log(444,this.a)
    }

    five(){
        console.log(555,this.a)
    }

    /*
    * react并不会真正的绑定事件到每一具体<<>>的元素上,而是采用事件代理的模式*/
}

export default App;